<template>
<PageContainer title="文章管理">
    <template #header-right>
        <el-button type="primary">新增文章</el-button>
    </template>

    <!-- 查询用表单 -->
    <el-form inline :model="formData" style="width: 100%;" label-width="110px">
        <el-form-item prop="cate_name" label="文章分类：">
            <!-- <el-select v-model="cateName" placeholder="选择分类" style="width: 240px">
                <el-option
                    v-for="item in cateList"
                    :key="item.id"
                    :label="item.cate_name"
                    :value="item.cate_name"
                />
            </el-select> -->
            <CateSelect v-model:cid="cateId" ref="cateSelectRef" @change="onChange"/>
        </el-form-item>

        <el-form-item prop="state" label="状态：">
            <el-select v-model="artState" placeholder="选择状态" style="width: 240px">
                <el-option label="已发布" value="已发布"/>
                <el-option label="草稿" value="草稿"/>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>

    <!-- 列表展示 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="title" label="文章标题" width="180" >
            <template #default="{ row }">
                <el-link type="primary" :underline="false">{{ row.title }}</el-link>
            </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类名称" width="180" />
        <el-table-column prop="pubDate" label="发布日期" width="180" />
        <el-table-column prop="state" label="状态" width="180" />
        <el-table-column prop="" label="操作" width="130" >
            <template #default="{row}">
                <div class="ope-container">
                    <el-button circle plain size="small" type="primary" :icon="Edit" @click="edit(row)"></el-button>
                    <el-button circle plain size="small" type="danger" :icon="Delete" @click="del(row)"></el-button>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="" label=""/>

        <template #empty>
            <el-empty description="没有数据"></el-empty>
        </template>
    </el-table>
</PageContainer>
</template>
<script setup>
import { onMounted,ref } from 'vue'
import { artGetList$,getCateList$ } from '@/api/article'
import { Edit, Delete } from '@element-plus/icons-vue'
import { formatDateTime } from '@/utils/datetimeUtils'
import CateSelect from './components/CateSelect.vue'

const cateId = ref(61495)
const cateSelectRef = ref()
const formData = ref({})
const artState = ref('')
const cateName = ref('')
const cateList = ref([])
// 定义请求参数对象
const params = ref({
  pagenum: 1, // 当前页
  pagesize: 5, // 当前生效的每页条数
  cate_id: '',
  state: ''
})
const loading = ref(false)
const tableData = ref([])
const tableDataa = ref([])

const initCateList = async () => {
    const { code,data,message } = await getCateList$()
    if(code !== 0){
        ElMessage.error(message)
        return
    }
    console.log('请求来的分类列表：', data)
    cateList.value = [...data]
}
const refreshTable = async () => {
    loading.value = true
    try{
        const { code,data,message } = await artGetList$(params.value)
        if(code !== 0){
            ElMessage.error(message)
            return
        }
        // console.log(data)
        // for(let item of data){
        //     const date1 = new Date(item['pub_date'])
        //     const pubDate = formatDateTime(date1)
        //     item['pubDate'] = pubDate
        // }
        data.map(item => {
            const date1 = new Date(item['pub_date'])
            item['pubDate'] = formatDateTime(date1)
        })
        tableDataa.value = [...data]
        tableData.value = [...data]
    }catch(err){
        console.log('请求表格数据时出现异常：',err)
    }finally{
        loading.value = false
    }
}
const initPage = async () => {
    initCateList()
    refreshTable()
}

const search = () => {
    // const ret = tableDataa.value.filter(item => item['cate_name'] === cateName.value && item['state'] === artState.value)
    const ret = tableDataa.value.filter(item =>{
        return item['cate_name'] === cateName.value || item['state'] === artState.value
    })
    tableData.value = [...ret]
}
const edit = row => {
    console.log('编辑的行数据：', row)
}
const del = row => {
    console.log('删除的行数据：', row)
}
const reset = () => {
    const cateName = cateSelectRef.value.getSelected()
    console.log(cateName)
    // console.log(cateSelectRef)
}
const onChange = val => {
    console.log(val)
}
onMounted(() =>{
    initPage()
})
</script>